<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ include file="/commons/taglibs.jsp"%>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="renderer" content="webkit">
		<meta http-equiv="Cache-Control" content="no-siteapp" />
		<title>邮件管理</title>
		<%@ include file="/commons/static.jsp"%>
		<link rel="shortcut icon" href="${ctx}/assets/img/favicon.png" type="image/x-icon">
		<link rel="stylesheet" href="${ctx}/dep/datetimepicker/css/bootstrap-datetimepicker.min.css" />
		<link rel="stylesheet" href="${ctx}/dep/zTreeStyle/zTreeStyle.min.css" />
		<script src="${ctx}/dep/zTreeStyle/jquery.ztree.all.min.js"></script>
		
	</head>

	<body>

		<!-- /Navbar -->
		<!-- Main Container -->
		<div class="main-container container-fluid">
			<!-- Page Container -->
			<!-- Page Sidebar -->
			<!-- /右侧内容 -->
			<div class="wrapper">
				<div class="page-container">
					<!-- 面包屑导航 -->
					<div class="page-breadcrumbs">
						<ul class="breadcrumb">
							<li>
								<i class="fa fa-home"></i>
								<a href="index.html">系统配置管理</a>
							</li>
							<li class="active">
								<a href="###">邮件管理</a>
							</li>
						</ul>
					</div>
					<!-- /面包屑导航-->
					<div class="page-body">
						<div class="row">

							<div class="col-xs-12 col-md-12">

								<div class="tabbable">
									<ul class="nav nav-tabs" id="myTab">
										<li class="active">
											<a id="tab-list" data-toggle="tab" href="#home">
												邮件列表
											</a>
										</li>

										<li class="tab-red">
											<a id="tab-add" data-toggle="tab" href="#profile">
												邮件添加
											</a>
										</li>
										<li class="tab-blue">
											<a id="tab-edit" data-toggle="tab" href="#editEmail" style="display: none;">
												邮件编辑
											</a>
										</li>
									</ul>

									<div class="tab-content">
										<div id="home" class="tab-pane in active">
											<div class="table-toolbar">

												<a href="" class="btn btn-darkorange col-padd" id="deleteBatch">
													<i class="fa fa-minus"></i>批量删除
												</a>
											<form action="" method="post" id="hiddens"></form>
											</div>
											<table class="table table-striped table-hover table-bordered" id="bodyHtml">
												<thead>
													<tr role="row">
														<th width="5%">
															<label>
                                                        <input type="checkbox" name="id" id="hvtck">
                                                        <span class="text" id="dohovertree"></span>
                                                        
                                                    </label>
														</th>
														<th>
															发送目标 <span class="fa indicator fa-unsorted"></span>
														</th>
														<th>
															邮件类型 <span class="fa indicator fa-unsorted"></span>
														</th>
														<th>
															发送时间 <span class="fa indicator fa-unsorted"></span>
														</th>
														<th>
															发送状态 <span class="fa indicator fa-unsorted"></span>
														</th>
														<th width="20%">
															操作<span class="fa indicator fa-unsorted"></span>
														</th>
													</tr>
												</thead>

												<tbody>
												<form action="" id="userform" method="post">
												<c:forEach items="${pager.list }" var="list">
													<tr>
														<td>
															<label>
	                                                        	<input type="checkbox" name="id" value="${list.id }">
	                                                        	<span class="text"></span>
	                                                    	</label>
														</td>
														<td><input type="text" class="six" value="${list.name}" disabled="disabled"></td>
														<td><input type="text" class="six" value="${list.sendType==1?'祝福邮件':list.sendType==2?'注册邮件':'找回密码邮件' }" disabled="disabled"></td>
														<td>
															<fmt:formatDate value="${list.sendTime }" pattern="yyyy-MM-dd HH:mm:ss"/>
														</td>
														<td><input type="text" class="six" value="${list.state==0?'未成功':'已成功' }" disabled="disabled"></td>
														<td>
															<a style="float: none;" href="#" class="btn btn-info btn-xs editClass" onclick="edit(${list.id})">
																</i> 修改</a>
															<a style="float: none;" href="#" class="btn btn-danger btn-xs removeClass" onclick="deleteSingle(${list.id})"><i class="fa fa-trash-o"></i> 删除</a>
														</td>
													</tr>
													</c:forEach>
													</form>
												</tbody>
											</table>
											<div class="btn-font dw_page" currentPage="${pager.currentPage}"
								total="${pager.total}" totalPages="${pager.totalPages}"
								pageSize="${pager.pageSize}">
								<div class="zjtm">共${pager.totalPages }页${pager.total }条</div>
								<div class="zjrightb">
									<ul class="pagination pull-right">
										<c:if test="${pager.totalPages == 1 || pager.totalPages == 0}">
											<li class="footable-page-arrow disabled"><a
												data-page="prev" href="javascript:void(0)">上一页</a></li>
											<li class="footable-page active"><a data-page="0"
												href="#">1</a></li>
											<li class="footable-page-arrow disabled"><a
												data-page="next" href="javascript:void(0)">下一页</a></li>
										</c:if>
										<c:if test="${pager.totalPages != 1 && pager.totalPages != 0}">
											<c:if test="${pager.currentPage == 1}">
												<li class="footable-page-arrow disabled"><a
													data-page="prev" href="javascript:void(0)">上一页</a></li>
												<li class="footable-page active"><a data-page="0"
													href="#">1</a></li>
												<li class="footable-page"><a data-page="1"
													href="javascript:_go(2);">2</a></li>
												<li class="footable-page-arrow"><a data-page="next"
													href="javascript:_next();">下一页</a></li>
											</c:if>
											<c:if
												test="${pager.currentPage != 1 && pager.currentPage != pager.totalPages}">
												<li class="footable-page-arrow"><a data-page="prev"
													href="javascript:_back();">上一页</a></li>
												<li class="footable-page"><a
													data-page="${pager.currentPage-2}"
													href="javascript:_go('${pager.currentPage-1}');">${pager.currentPage-1}</a></li>
												<li class="footable-page active"><a
													data-page="${pager.currentPage-1}" href="#">${pager.currentPage}</a></li>
												<li class="footable-page"><a
													data-page="${pager.currentPage}"
													href="javascript:_go('${pager.currentPage+1}')">${pager.currentPage+1}</a></li>
												<li class="footable-page-arrow"><a data-page="next"
													href="javascript:_next();">下一页</a></li>
											</c:if>
											<c:if test="${ pager.currentPage == pager.totalPages}">
												<li class="footable-page-arrow"><a data-page="prev"
													href="javascript:_back();">上一页</a></li>
												<li class="footable-page"><a
													data-page="${pager.currentPage-2}"
													href="javascript:_go('${pager.currentPage-1}');">${pager.currentPage-1}</a></li>
												<li class="footable-page active"><a
													data-page="${pager.currentPage-1}" href="#">${pager.currentPage}</a></li>
												<li class="footable-page-arrow disabled"><a data-page="next"
													href="javascript:void(0)">下一页</a></li>
											</c:if>
										</c:if>



										<!-- <li class="footable-page-arrow disabled"><a
											data-page="prev" href="javascript:_back();">上一页</a></li>
										<li class="footable-page active"><a data-page="0"
											href="#">1</a></li>
										<li class="footable-page"><a data-page="1" href="#">2</a></li>
										<li class="footable-page-arrow"><a data-page="next"
											href="javascript:_next();">下一页</a></li> -->
									</ul>
								</div>
							</div>
										</div>
										<!-- 新增短信 form -->
										<div id="profile" class="tab-pane">

											<form id="registrationForm" method="post" class="form-horizontal" onsubmit="return userformcheck()">

												<div class="form-group">
													<label class="col-lg-2 col-sm-2 control-label">发送目标<span class="help-inline"><font color="red">*</font></span></label>
													<div class="col-lg-8 col-sm-10">
														<input id="citySel" class="form-control" type="text" data-bv-notempty="true" data-bv-notempty-message="发送人不能为空" onclick="showMenu();" />
														<input id="cityId" name="ids" type="hidden"/>
													</div>
												</div>

												<input type="hidden" name="type" value="2">
												
												<div class="form-group">
													<label class="col-lg-2 col-sm-2 control-label">邮件类型</label>
													<div class="col-lg-8 col-sm-10">
														<select class="form-control" name="sendType">
															<option value="1" selected="selected">祝福邮件</option>
															<option value="2">注册邮件</option>
															<option value="3">找回密码邮件</option>
														</select>
													</div>
												</div>

												<div class="form-group" id="sendType">
													<label class="col-lg-2 col-sm-2 control-label">发送方式</label>
													<div class="col-lg-8 col-sm-10">
														<select type="text" class="form-control" name="sendMethod">
															<option value="1" selected="selected">手动</option>
															<option value="2">自动</option>
														</select>	
													</div>
												</div>
												
												<div class="form-group">
													<label class="col-lg-2 col-sm-2 control-label">邮件内容</label>
													<div class="col-lg-8 col-sm-10">
														<textarea class="form-control" name="content" rows="3"></textarea>
													</div>
												</div>
												
												<div class="form-group">
													<div class="col-lg-offset-2 col-lg-8">
														<input class="btn btn-palegreen col-lg-12" type="submit" value="提交" />
													</div>
												</div>

											</form>
										</div>

										<div id="editEmail" class="tab-pane">

											<form id="editForm" method="post" class="form-horizontal" onsubmit="return userformedit()">
											
												<div class="form-group">
													<label class="col-lg-2 col-sm-2 control-label">发送目标<span class="help-inline"><font color="red">*</font></span></label>
													<div class="col-lg-8 col-sm-10">
														<input id="citySel2" class="form-control" type="text" data-bv-notempty="true" data-bv-notempty-message="发送人不能为空"  />
														<input id="cityId2" name="ids" type="hidden"/>
													</div>
												</div>
											
											
												<!-- <div class="form-group">
													<label class="col-lg-4 control-label">发送目标<span class="help-inline"><font color="red">*</font></span></label>
													<div class="col-lg-8">
														<input id="targetAddr2" name="ids" class="form-control" type="text" data-bv-notempty="true" data-bv-notempty-message="发送人不能为空" />
													</div>
												</div> -->
												<input type="hidden" name="id" id="id2">

												<div class="form-group" id="sendType">
													<label class="col-lg-2 col-sm-2 control-label">发送方式</label>
													<div class="col-lg-8 col-sm-10">
														<select type="text" class="form-control" name="sendMethod" id="sendMethod">
															<option value="1" selected="selected">手动</option>
															<option value="2">自动</option>
														</select>	
													</div>
												</div>
												
												<div class="form-group">
													<label class="col-lg-2 col-sm-2 control-label">邮件类型</label>
													<div class="col-lg-8 col-sm-10">
														<select class="form-control" name="sendType" id="type2">
															<option value="1">祝福邮件</option>
															<option value="2">注册邮件</option>
															<option value="3">找回密码邮件</option>
														</select>
													</div>
												</div>

												<input type="hidden" name="type" value="2">
												
												<div class="form-group">
													<label class="col-lg-2 col-sm-2 control-label">邮件内容</label>
													<div class="col-lg-8 col-sm-10">
														<textarea class="form-control" name="content" id="content2" rows="3"></textarea>
													</div>
												</div>
												
												<div class="form-group">
													<div class="col-lg-offset-2 col-lg-8">
														<input class="btn btn-palegreen col-lg-12" type="submit" value="提交" />
													</div>
												</div>
											</form>

										</div>

									</div>
								</div>
							</div>

						</div>

					</div>

					<P class="bottomfont">© 2016 Angel Health Management Ltd. : 天使健康管理有限公司</P>

				</div>

			</div>
			<!-- /右侧内容 -->

		</div>


		<div id="menuContent" class="form-control" style="display:none; position: absolute;
overflow:scroll">
			<ul id="treeDemo" class="ztree" style="margin-top:0; width:180px; height: 300px;"></ul>
		</div>

		
		<script src="${ctx}/dep/bootstrap.min.js"></script>
		<script src="${ctx}/dep/validation/bootstrapValidator.js"></script>
		
		<script src="${ctx}/dep/datetime/bootstrap-datepicker.js"></script>
		<script src="${ctx}/dep/datetime/bootstrap-timepicker.js"></script>
		
		<script src="${ctx}/dep/datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
		<script src="${ctx}/dep/datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
		
		<script src="${ctx}/dep/fuelux/treeview/tree-custom.min.js"></script>


		<script type="text/javascript">
		var setting = {
				check: {
					enable: true,
				},
				view: {
					dblClickExpand: false
				},
				data: {
					simpleData: {
						enable: true
					}
				},
				callback: {
					beforeClick: beforeClick,
					onCheck: onCheck
				}
			};

			function beforeClick(treeId, treeNode) {
				var zTree = $.fn.zTree.getZTreeObj("treeDemo");
				zTree.checkNode(treeNode, !treeNode.checked, null, true);
				return false;
			}
			
			function onCheck(e, treeId, treeNode) {
				var zTree = $.fn.zTree.getZTreeObj("treeDemo");
				nodes = zTree.getCheckedNodes(true);
				v = "";
				vid = "";
				for (var i=0, l=nodes.length; i<l; i++) {
					if(nodes[i].pId){
						v += nodes[i].name + ",";
						vid += nodes[i].id+",";
					}
				}
				if (v.length > 0 ) v = v.substring(0, v.length-1);
				if (vid.length > 0 ) vid = vid.substring(0, vid.length-1);
				var cityObj = $("#citySel");
				var cityid = $("#cityId");
				cityObj.attr("value", v);
				cityid.attr("value", vid);
			}

			function showMenu() {
				var cityObj = $("#citySel");
				var cityOffset = $("#citySel").offset();
				$("#menuContent").css({left:cityOffset.left + "px", top:cityOffset.top + cityObj.outerHeight() + "px",width:cityObj.outerWidth() + "px"}).slideDown("fast");

				$("body").bind("mousedown", onBodyDown);
			}
			function hideMenu() {
				$("#menuContent").fadeOut("fast");
				$("body").unbind("mousedown", onBodyDown);
			}
			function onBodyDown(event) {
				if (!(event.target.id == "menuBtn" || event.target.id == "citySel" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) {
					hideMenu();
				}
			}

			$(document).ready(function(){
				$.ajax({
					url : '${ctx}/customer/findAllCustomer?method=2',
					type : 'POST',
					dataType : 'text',
					success : function(data) {
						var zNodes = eval("(" + data + ")");
						$.fn.zTree.init($("#treeDemo"), setting, zNodes);
					},
					error : function(msg) {
						toastr.error('树加载异常!');
					}
				});
			});
		</script>
		
		
		<script>
		
			$('select[name="msgType"]').change(function(){
				if($(this).val() != 1){
					$('#sendType').hide();
					$('#sendTime').hide();
				}else{
					$('#sendType').show();
					$('#sendTime').show();
				}
			})
			
			$('select[name="sendType"]').change(function(){
				if($(this).val() == 1){
					$('#sendTime').hide();
				}
				if($(this).val() == 2){
					$('#sendTime').show();
				}
			})
		
		
			$('.date-picker').datetimepicker({
				format: 'yyyy-mm-dd hh:ii:ss',
				language: 'zh-CN',
                autoclose: true,
                todayHighlight: true
			});
		
			$(function() {
				$("#registrationForm").bootstrapValidator();
				$("#editForm").bootstrapValidator();
				//UITree.init();
				$(".editClass").on('click', function() {
					editClass(this)
				});
				//编辑
				function editClass(_this) {
					$('#tab-edit').show();
					$('#tab-edit').click();
				}
				$(".removeClass").on('click', function() {
					removeClass(this)
				});
				// 删除
				function removeClass(_this) {
					$(_this).parent().parent().remove();
				}
				$('#tab-add,#tab-list').click(function() {
					$('#tab-edit').hide();
				})
			});

			function newDepart() {
				$('#tab-add').click();
			}

			$("#hvtck").click(function(){
	    		var eles = document.getElementsByName("id");
	    		for (var i = 1; i < eles.length; i++) {
					eles[i].checked = eles[0].checked;
				}
	    	})
	    	$("#deleteBatch").click(function(){
	    		var ids = $("#userform").serialize();
	    		if(!ids){
	    			toastr.error("请选择要删除的内容");
	    			return false;
	    		}
	    		ids = ids.replace(/id=/g,"");
	    		if(confirm("是否确定删除")){
					$.ajax({
						url : "${ctx}/manag/message/delete",
						type : "POST",
						data : {"ids":ids},
						dataType : "json",
						success : function(data) {
							if (data > 0) {
								window.location.href = "${ctx}/manag/message/indexEmail";
							} else {
								toastr.error("删除失败！");
								return false;
							}
						}
					});
	    		}
	    	})
	    	function deleteSingle(id){
				if(confirm("是否确定删除")){
					$.ajax({
						url : "${ctx}/manag/message/deleteById",
						type : "POST",
						data : {"id":id},
						dataType : "json",
						success : function(data) {
							if (data > 0) {
								window.location.href = "${ctx}/manag/message/indexEmail";
							} else {
								toastr.error("删除失败！");
								return false;
							}
						}
					});
	    		}
			}
			function edit(id){
	    		 $.ajax({
	                 url: "${ctx}/manag/message/edit",
	                 type: "POST",
	                 data: {id:id},
	                 dataType : "json",
	         		success : function(data) {
	         			$("#id2").val(data.id);
	         			var name = data.name;
	         			var memPhone = data.email;
	         			if(name){
	         				if(memPhone){
			         			$("#citySel2").val(name+","+memPhone);
	         				}else{
			         			$("#citySel2").val(name);
	         				}
	         			}
	         			$("#cityId2").val(data.customerId)
	         			$("#type2").val(data.sendType);
	         			$("#sendMethod2").val(data.sendMethod);
	         			$("#content2").val(data.content);
	         		}
	             });
			}
			function userformcheck(){
				$('#registrationForm').data('bootstrapValidator').validate();
				if($('#registrationForm').data('bootstrapValidator').isValid()) {
					$.ajax({
						url : "${ctx}/manag/message/save",
						type : "POST",
						data : $("#registrationForm").serialize(),
						dataType : "json",
						success : function(data) {
							if($(data)[0]["code"]=="1"){
								window.location.href = "${ctx}/manag/message/indexEmail";
							}else{
								toastr.error($(data)[0]["msg"]);
							}
						}
					});
				}
			}
			function userformedit(){
				$('#editForm').data('bootstrapValidator').validate();
				if($('#editForm').data('bootstrapValidator').isValid()) {
					$.ajax({
						url : "${ctx}/manag/message/update",
						type : "POST",
						data : $("#editForm").serialize(),
						dataType : "json",
						success : function(data) {
							if($(data)[0]["code"]=="1"){
								window.location.href = "${ctx}/manag/message/indexEmail";
							}else{
								toastr.error($(data)[0]["msg"]);
							}
						}
					});
				}
			}
		</script>

	</body>

</html>